<template>
	<div class="platform" id="scroll2">
		<div class="content">
			<transition name="fade">
				<ul>
					<li class="content-item vux-1px-b" v-for="item in platformList" @click="paramPlatform(item)">
							{{item.cat_name}}
					</li>
				</ul>
			</transition>	
		</div>
	</div>
</template>

<script>
	export default{
		name : "platformList",
		props:{
			platformList:{
				type : Array,
				default : () => {
					return []
				}
			}
		},
		data(){
			return{
				
			}
		},
		methods:{
			closePlatform(){
				this.$emit('close')
			},
			paramPlatform(item){
				this.$emit('closeP',{
					id:item.id,
					name:item.cat_name,
					cat_pid:item.cat_pid
				})
			},
			isWeChat(){
				let agent = navigator.userAgent.toLowerCase();
			    if (agent.match(/MicroMessenger/i) == "micromessenger") {
			       	this.isWeChat = false
			       	document.getElementById('scroll2').style.top= 1.15 + "rem"
			    } else {
			        this.isWeChat = true
			    }
			}
		},
		mounted(){
			this.isWeChat()
		}
	}
</script>

<style lang="less" scoped>
	@import '~styles/mixin.less';
	@import '~vux/src/styles/1px.less';
	.platform{
		position:fixed;
		top:1.15rem;
		left:0;
		right:0;
		width:100%;
		z-index:120;
		
		.fade-enter-active,.fade-leave-active{
			transition: transform .3s ease-out;
		}
		.fade-enter,.fade-leave-to{
			transform: translateY(-5rem);
		}
		ul{
			overflow-y: scroll;
			max-height: 5rem;
			padding:0 .2rem;
			background:#fff;
			.content-item{			
				text-align:center;
				line-height: 1rem;
				font-size:.28rem;				
			}
		}

	}
	
</style>